<template>
    <!-- 所有内容被这个根节点包裹起来 -->
    <div>
        <h3>这是生命周期函数演示</h3>
        <h4 ref="m">{{msg}}</h4>
        <button @click="setMsg()">修改</button>
    </div>
</template>

<script>
    /* 向外暴露 */
    export default {
        data () {
            return {
                msg:'生命周期钩子函数'
            }
        },
        methods: {
            setMsg(){
                this.msg = "修改后",
                console.log("被调用了")
            }
        },
        //组件挂载钱
        beforeCreate () {
            //表示实例完全被创建之前会执行的函数 data和methods的数据并没有初始化
            // console.log("------beforeCreate------");
            // console.log(this.msg);
            // this.setMsg()
        },
        //创建后
        created () {
            //data和methods已经被初始化好了,如果要调用data中的属性或methods中的方法，可以在created中调用
            //但是不能获取到dom元素
            // console.log("------created------");
            // console.log(this.msg);
            // console.log(this.$refs.m);//undefined
            // this.setMsg()
        },
        //挂载前
        beforeMount () {
            //模板已经在内存中编译好了,但是尚未编译到页面中去,此时页面还是旧的
            // console.log("------beforeMount------");
            // console.log(this.msg);
            // console.log(this.$refs.m);//undefined
            // this.setMsg()
        },
        //挂载后
        mounted () {
            //组件已经脱离了创建阶段,进入到了运行阶段
            //如果需要操作dom节点,最早要在mounted进行
            // console.log("------mounted------");
            // console.log(this.msg);
            // console.log(this.$refs.m);//undefined
            // this.setMsg()
        },
        //修改前
        beforeUpdate () {
            //当beforeUpdate执行的时候,页面的数据还是旧的,data中的数据是最新的,页面没有和最新的数据保持一致
            // console.log("------beforeUpdate------");
            // console.log("data的数据"+this.msg);
            // console.log("页面的数据"+this.$refs.m.innerText);//undefined
        },
        updated () {
            //数据也页面已经保持了同步,都是最新的
            // console.log("------beforeUpdate------");
            // console.log("data的数据:"+this.msg);
            // console.log("页面的数据:"+this.$refs.m.innerText);
        },
        //销毁前
        beforeDestroy () {
            //页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数 类似cookie
            // console.log("------beforeDestroy------");
            // console.log("data的数据:"+this.msg);
            // console.log("页面的数据:"+this.$refs.m.innerText);
        },
        //销毁后
        destroyed () {
            //组件已经完全被销毁,此时所有的数据和方法、指令等等,都不可以用了
            console.log("------destroyed------");
            console.log("data的数据:"+this.msg);
            console.log("页面的数据:"+this.$refs.m.innerText);
        }
    }
</script>

<style>

</style>